<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>申请信息</title>
    <div th:include="common/Head :: headCss"></div>
</head>

<body style="background: white">

<!--todo 流程表单头部， 还未完成-->
<div th:include="activiti/common/form :: formHeadView"></div>

<div class="container" style="padding-left:0!important;padding-right:0!important;">
    <!--下面是业务表单-->
    <form name="businessForm" id="businessForm">
        <div class="table-responsive">
            <table class="table table-bordered">
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td>申请部门</td>
                        <td>ID测试</td>
                        <td>申请日期</td>
                        <td><input  type="text" class="form-control" style="width:220px" required id="startTime" name="startTime"/></td>
                        <td>是否遇节假日</td>
                        <td>
                            <select class="form-control" name="leaveType" data-edit="">
                                <option>请选择</option>
                                <option value="1" name="shi">是</option>
                                <option value="2" name="fou">否</option>
                                <!--<option value="3" >调休</option>-->
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>出差负责人</td>
                        <td><input type="text" class="form-control" required name="erson"/></td>
                        <td>职  务</td>
                        <td><input type="text" class="form-control" required name="duties"/></td>

                        <td>出差人数</td>
                        <td><input type="text" class="form-control" required name="number"/></td>
                    </tr>
                    <tr>
                        <td>出差人员</td>
                        <td colspan="8" style="height: 0.1cm"><textarea class="form-control"  required name="reasonaa"></textarea></td>
                    </tr>
                    <tr>
                        <td>出差性质</td>
                        <td colspan="8" class='form-inline' >
                            <label><input  type="checkbox" class="form-control" value="huiyi" name="huiyi" />会议 </label>&nbsp;&nbsp;&nbsp;
                            <label><input  type="checkbox" class="form-control" value="huiyi" name="peixun"/>培训 </label>&nbsp;&nbsp;&nbsp;
                            <label><input  type="checkbox" class="form-control" value="huiyi" name="yewu"/>业务派遣</label>&nbsp;&nbsp;&nbsp;
                            <label><input  type="checkbox" class="form-control" value="huiyi" name="qitaa" />其他</label>&nbsp;&nbsp;&nbsp;<input type="text" class="form-control" name="qita"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle">出差事由</td>
                        <td colspan="8" style="height: 4cm"><textarea class="form-control" name="reason" style="min-height: 3.5cm"></textarea></td>
                    </tr>
                    <tr>
                        <td>预定开始时间</td>
                        <td colspan="8" class='form-inline'>&nbsp;&nbsp;
                            自&nbsp;<input  type="text" class="form-control" style="width:220px" required id="startTimes" name="startTimes"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            到止&nbsp;<input  type="text" class="form-control" style="width:220px" required id="endTime" name="endTime"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            共&nbsp;<input  type="text" class="form-control" style="width:220px" id="nDays" name="nDays" />天
                        </td>
                    </tr>
                    <!--<tr>-->
                        <!--<td colspan="8" class='form-inline' style="text-align: center;">&nbsp;&nbsp;-->
                            <!--出差计划-->
                        <!--</td>-->
                    <!--<tr>-->
                        <!--<td colspan="8" class='form-inline' style="text-align: center;height:100px;" >&nbsp;&nbsp;-->

                        <!--</td>-->
                    <!--</tr>-->

                    <tr>
                        <td>备注</td>
                        <td colspan="8" style="height: 0.1cm"><textarea class="form-control" name="reasonbb"></textarea></td>
                    </tr>
                    <!--<tr>-->
                    <!--<td>预支差旅费</td>-->
                    <!--<td > <label><input name="Fruit" type="checkbox" value="" />是 </label>&nbsp;&nbsp;&nbsp;-->
                    <!--<label><input name="Fruit" type="checkbox" value="" />否 </label>&nbsp;&nbsp;&nbsp;</td>-->
                    <!--<td class='form-inline'>需要预支-->
                    <!--<input type="text" class="form-control" style="width:220px"/>元-->
                    <!--</td>-->
                    <!--<td class='form-inline'>出差人数-->
                    <!--<input type="text" class="form-control" /></td>-->
                    <!--</tr>-->

                    </tbody>
                </table>
            </table>
        </div>

        <!--隐藏字段，用于路由条件变量判断-->
        <div id="hideDiv">
            <input type="hidden" name="userId" value="">
            <input type="hidden" name="type" value="2">
        </div>
        <!--用于表单必填验证-->
        <div th:include="activiti/common/form :: busBtn"></div>

    </form>
</div>

<!--提交任务模态框-->
<div th:include="activiti/common/form :: submitTaskModal"></div>

<div th:include="common/Head :: mainJs"></div>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#startTime'
        });
        laydate.render({
            elem: '#startTimes'
        });
        laydate.render({
            elem: '#endTime'
        });

    });

    /**
     * 重写表单提交前事件
     * @returns {boolean}
     */
    function preSubmit() {
        console.log('重写表单提交前事件...');
        var startTimes  = $(" input[ name='startTimes' ] ").val();
        var endTime  = $(" input[ name='endTime' ] ").val();
        var bd = daysBetween(startTimes, endTime);
        console.log('bd=', bd);
        $("#nDays").val(bd);
        // 此处编写任务提交前的业务逻辑（如果需要，不需要就不用重写此方法了）
        // alert('不允许提交');
        // return false;   // 返回false可阻止继续表单提交
    }

    function daysBetween(startTimes,endTime){
//Date.parse() 解析一个日期时间字符串，并返回1970/1/1 午夜距离该日期时间的毫秒数
        var time1 = Date.parse(new Date(startTimes));
        var time2 = Date.parse(new Date(endTime));
        var nDays = Math.abs(parseInt((time2 - time1)/1000/3600/24));
        return  nDays;
    };

</script>
</body>
</html>